import React, { useState, useEffect, useRef, useMemo } from 'react';
import Taro, { useDidShow, SocketTask } from '@tarojs/taro';
import { ScrollView, Input, Text, LivePlayer, Video, RichText, Block, View } from '@tarojs/components'
import ChatRoom from './../ChatRoom';
const renderChatRoom = (props) => {
  const { renderStyle, renderSelf, messages = [], goodsType, goodsId, session, socketFalg, connect } = props
  useEffect(() => {
    scrollToBottom()
  }, [messages])
  const scrollToBottom = () => {
    Taro.createSelectorQuery()
      .select('#scrollInfo')
      .node()
      .exec((res) => {
        const scrollView = res[0].node;
        scrollView.scrollIntoView('#scroll' + (messages.length - 1));
      })
    return

  };

  const memo = useMemo(() => {
    if (renderStyle !== 'default' && renderSelf === 'sp') {
      return <View className="liveInteraction_content liveInteraction_content_sp" >
        <ScrollView id={'scrollInfo'} scrollY style={{ height: '90%' }}>
          {renderStyle === 'default' && <View className="liveInteraction_live_desc">
            系统提示:直播内容及互动评论均严禁传播违法或不良负面信息，如有违反，平台将采取封禁措施。直播初请各位耐心等待，直播期间如遇问题请联系班主任讲师。
          </View>}
          <View className="liveInteraction_socket">
            {messages.map((item, index) => {
              return <Block>
                <View id={'scroll' + index}><ChatRoom key={index} hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>;
                </View>
              </Block>
            })}

          </View>

        </ScrollView>

      </View>
    } else if (renderStyle !== 'default' && renderSelf === 'hp') {
      return <View className="liveInteraction_content liveInteraction_content_hp" >
        <ScrollView id={'scrollInfo'} scrollY style={{ height: '90%' }}>
          <View className="liveInteraction_live_desc">
            系统提示:直播内容及互动评论均严禁传播违法或不良负面信息，如有违反，平台将采取封禁措施。直播初请各位耐心等待，直播期间如遇问题请联系班主任讲师。
          </View>
          <View className="liveInteraction_socket">
            {messages.map((item, index) => {
              return <Block>
                <View id={'scroll' + index}>
                  <ChatRoom key={index} hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>
                </View>
              </Block>
            })}


          </View>
        </ScrollView>

      </View>
    } else {
      return <View className="liveInteraction_content">
        {/* {!socketFalg && <View className='liveInteraction_socket_loading'>
          聊天室已断开，请<Text className='liveInteraction_socket_exit' onClick={() => connect()}>重新连接</Text>
        </View>} */}

        <ScrollView id={'scrollInfo'} scrollY style={{ height: '90%' }}>
          <View className="liveInteraction_live_desc">
            系统提示：直播内容及互动评论均严禁传播违法或
            不良或负面信息，如有违反，宏小图将采取封禁措
            施。直播初请各位耐心等待，直播期间如遇问题请
            联系班主任讲师。
          </View>
          {messages.map((item, index) => {
            return <Block>
              <View id={'scroll' + index}>
                <ChatRoom key={index} hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>
              </View>
            </Block>;
          })}
        </ScrollView>

      </View>
    }
  }, [renderStyle, renderSelf, messages, goodsType, goodsId, session, socketFalg])
  return memo

}
export default renderChatRoom